<template>
    <div>
        <el-dialog title="修改联络灯到人配置" :visible.sync="dialogVisible" width="450px" @close='close'
            :close-on-click-modal='false'>
            <div class="dialogBody">
                <el-form :inline="true" :model="form" label-width="120px" size="mini" ref="form">
                    <el-form-item label="联络灯类型" prop="lampTypeId">
                        <el-select v-model="form.lampTypeId" filterable placeholder="请选择" clearable @change="handleChange">
                            <el-option v-for="item in lampTypeList" :key="item.value" :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="通知人员" prop="infoUser">
                        <el-select v-model="form.infoUser" filterable placeholder="请选择" clearable multiple
                            >
                            <el-option v-for="item in userOptions" :key="item.id" :label="item.name" :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
            </div>
            <span slot="footer" class="footer">
                <el-button size="mini" @click='dialogVisible = false'>取 消</el-button>
                <el-button type="primary" size="mini" @click="confirm">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                form: {
                    id:null,
                    lampTypeId:'',
                    infoUser: [],
                    infoUserName:[],
                    lampTypeName:''
                },
                dialogVisible: false,
            }
        },
        props: {
            lampTypeList: {
                type: Array,
                default: () => []
            },
            userOptions: {
                type: Array,
                default: () => []
            }
        },
        methods: {
            open(payload) {
                const {type,row} = payload
                switch (type) {
                    case 'edit':
                        const {id,infoUser,lampTypeId,infoUserName,lampTypeName} = row
                        this.$nextTick(()=>{
                            this.form.id = id
                            this.form.infoUser = Array.isArray(infoUser) ? infoUser : infoUser.split(',').map(Number)
                            this.form.lampTypeId = lampTypeId + ''
                            this.form.infoUserName = infoUserName
                            this.form.lampTypeName = lampTypeName
                        })
                        break;
                }
                this.dialogVisible = true
            },
            close() {
                this.form = this.$options.data().form
                this.$refs.form.resetFields()
            },
            handleChange(val){
                if(this.form.lampTypeId.length){
                    this.form.lampTypeName = this.lampTypeList.find(i => i.value == val).label
                }else{
                    this.form.lampTypeName = ''
                }
            },
            //确定
            confirm() {
                const {
                    lampTypeId,
                    infoUser
                } = this.form
                this.form.infoUserName = []
                if (!lampTypeId.length) {
                    this.utils.showMsg('请选择联络灯类型', 'warning')
                } else if (!infoUser.length) {
                    this.utils.showMsg('请选择通知人员', 'warning')
                } else {
                    this.userOptions.forEach(i => {
                        infoUser.forEach(v => {
                            if (i.id == v) this.form.infoUserName.push(i.name)
                        })
                    })
                    this.$emit('getInnerInfo',this.form)
                    this.dialogVisible = false
                }
            }
        }
    }
</script>

<style lang="less" scoped>
    .el-form-item--mini.el-form-item {
        width: 90%;

        /deep/ .el-form-item__content {
            width: 60%;
        }

        .el-input-number--mini,
        .el-input--mini,
        .el-select {
            width: 100%;
        }
    }

    /deep/ .el-dialog__body {
        padding: 8px 20px 0 20px;

        .dialogBody {
            padding-top: 18px;
        }
    }
</style>